<template>
  <el-container style="height: 100%">
    <!--科室选择-->
    <el-aside style="background-color:#e7e7e7;display: flex;width: 250px;height: 100%;  margin-right: 30px;">
      <el-scrollbar style="width: 100%">
        <el-menu :default-active="menuActive" class="depart_menu" >
          <el-menu-item
              v-for="department in departmentList"
              :key="department.id"
              :index="department.id"
              @click="() => getClinicListByCon(department)">
            {{ department.name }}
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <!--诊所选择-->
    <el-main style="background-color: rgba(65, 159, 255, 0.15);">
      <el-row :gutter="20" v-for="(clinicRow, rowIndex) in clinicRows" :key="rowIndex">
        <el-col :span="8" v-for="(clinic, colIndex) in clinicRow" :key="colIndex">
          <el-button text style="margin:10px;" @click="next(clinic.id,clinic.name)">{{ clinic.name }}</el-button>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import {computed, ref} from 'vue'
import { useRouter } from "vue-router";
import mitt from '@/utils/mitt'
import { useMainStore } from '@/store';
import departClinicDoctorItemApi from "@/apis/departClinicDoctorItem";

const store = useMainStore();
const router = useRouter();
const emitter = mitt

const departAndClinic = {
  departmentId:'',
  departmentName:'',
  clinicId:'',
  clinicName:''
}

const next = (id, name)=>{
  departAndClinic.clinicId = id;
  departAndClinic.clinicName = name;
  // console.log(departAndClinic)
  emitter.emit('next',1);
  router.push({name:'ChooseRegDoctor'});

  store.setDepartAndClinic(departAndClinic)
}

// 当前激活的菜单项索引
const menuActive = ref('0');

const departmentList = ref([]);
const clinicList = ref([]);

const getDepartList = async () => {
  const res = await departClinicDoctorItemApi.getDepartList()
  // console.log(res)
  if(res.code === 200){
    departmentList.value = res.data;
  }else {
    departmentList.value = null;
  }
}
getDepartList();

const getClinicListByCon = async (department) =>{
  // departAndClinic.departmentId = index;
  // console.log(department)
  departAndClinic.departmentId = department.id;
  departAndClinic.departmentName = department.name;
  const data = {
    departmentId:department.id
  }
  // console.log(data);
  const res = await departClinicDoctorItemApi.getClinicListByCon(data)
  if(res.code === 200){
    clinicList.value = res.data;
  }else {
    clinicList.value = null;
  }
}


//计算属性，用于将诊所列表分割成多行，每行三个
const clinicRows = computed(() => {
  return Array.from({ length: Math.ceil(clinicList.value.length / 3) }, (_, index) => {
    return clinicList.value.slice(index * 3, (index + 1) * 3);
  });
});
</script>



<style scoped>
.depart_menu{
  background-color:#e7e7e7;
  width: 100%;
  margin-right: 30px;
  border: none;
}
</style>
